<template>
    <div class="row product-list">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <ol class="breadcrumb">
                        <li><a>基本设置</a></li>
                        <li><a>菜单管理</a></li>
                    </ol>
                </div>
                <div class="content-wrapper">
                    <div class="col-sm-12" style="padding: 12px 0px 12px 0px;">
                        <div class="alert alert-info" style="margin-bottom: 0px">
                            <a class="revision-btn" href="javaScript:void(0)" @click="openNewModal">新增</a>
                            <span style="margin-left: 10px" v-if="data != null && !$isEmptyArray(data.list)">总条数：<span>{{data.total}} 条</span></span>&nbsp;&nbsp;
                        </div>
                    </div>

                    <el-table
                        :data="tableListData"
                        :row-style="toggleDisplayTr"
                        :header-cell-style="{'background-color': '#F5F5F6'}"
                        border stripe
                        class="init_table">
                        <el-table-column
                            align="center"
                            width="100"
                            type="index"
                            prop="menuId"
                            label="菜单ID">
                        </el-table-column>
                        <el-table-column
                            label="菜单名称"
                            min-width="200"
                            show-overflow-tooltip
                            align="left">
                            <template slot-scope="scope">
                                <p :style="`margin-left: ${scope.row.__level * 20}px;margin-top:0;margin-bottom:0`">
                                    <i @click="toggleFoldingStatus(scope.row)" class="permission_toggleFold"
                                    :class="toggleFoldingClass(scope.row)"></i>
                                    {{scope.row.name}}
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            width="100"
                            prop="type"
                            label="层级">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            width="100"
                            label="图标">
                            <template slot-scope="scope">
                                <i :class="scope.row.icon"></i>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="left"
                            prop="url"
                            label="菜单URL">
                        </el-table-column>
<!--                        <el-table-column-->
<!--                            align="center"-->
<!--                            prop="pid"-->
<!--                            label="授权标识">-->
<!--                        </el-table-column>-->

                        <el-table-column
                            align="center"
                            width="150"
                            label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" @click="editDetail(scope.row.menuId)">编辑</el-button>
<!--                                <el-button type="text" @click="clickDelete(scope.row)">删除</el-button>-->
                            </template>
                        </el-table-column>
                    </el-table>

                    <!--<template v-if="data != null">
                        <el-table
                            ref="dataTable"
                            :data="data.list"
                            :border="true"
                            tooltip-effect="dark"
                            :header-cell-style="{'background-color': '#F5F5F6'}"
                            max-height="600"
                            style="width: 100%;margin-top: 20px">
                            <el-table-column type="selection" align="center"
                                             width="55">
                            </el-table-column>
                            <template v-for="columnName in columnNames">
                                <template v-if="columnName.prop === 'status'">
                                    <el-table-column align="center"
                                                     :label="columnName.label"
                                                     :prop="columnName.prop">
                                        <template slot-scope="scope">
                                            <span style="color:#F00;"
                                                  v-if="scope.row.status === 0">禁用</span>
                                            <span style="color:#1ab394;"
                                                  v-if="scope.row.status === 1">正常</span>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else>
                                    <el-table-column align="center"
                                                     :label="columnName.label"
                                                     :prop="columnName.prop">
                                    </el-table-column>
                                </template>
                            </template>
                            <el-table-column align="center"
                                             fixed="right"
                                             label="操作"
                                             width="300">
                                <template slot-scope="scope">
                                    <el-button type="text" @click="editDetail(scope.row.menuId)" size="small">
                                        修改
                                    </el-button>
                                    <el-button type="text" @click="onDelRow(scope.row.menuId)" size="small">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>-->
                    <!--  <el-pagination style="float: right;margin-top: 10px"
                                     @size-change="handleSizeChange"
                                     @current-change="handleCurrentChange"
                                     :current-page.sync="data.currPage"
                                     :page-size="data.pageSize"
                                     layout="total, prev, pager, next"
                                     :total="data.totalCount">
                      </el-pagination>-->
                </div>
                <add-menu-modal ref="categoryModal" :editId="menuId" :showAddModal="showAddModal"
                                @onSubmitNewModal="onSubmitNewModal"
                                @onCancelNewModal="onCancelNewModal"></add-menu-modal>
                <confirm-modal :showConfirmModal="showConfirmModal" @closeModal="closeConfirmModal" :isSingle="isSingle"
                               @submitModal="submitBatchDeleteRow"></confirm-modal>
            </div>
        </div>
    </div>
</template>

<script>
    import AddMenuModal from './addMenuModal.vue';
    import ConfirmModal from "../../components/confirmModal";
    import Vue from 'vue';

    export default {
        name: 'MnuConfig',
        components: {ConfirmModal, AddMenuModal},
        data() {
            return {
                categoryList: [],
                showAddModal: false,
                showConfirmModal: false,
                isSingle: false,
                queryForm: {},
                columnNames: [{
                    label: '菜单ID',
                    prop: 'menuId',
                    width: 120
                }, {
                    label: '菜单名称',
                    prop: 'name',
                    width: 120
                }, {
                    label: '上级菜单',
                    prop: 'parentName',
                    width: 120
                }, {
                    label: '图标',
                    prop: 'icon',
                    width: 120
                }, {
                    label: '类型',
                    prop: 'type',
                    width: 120
                }, {
                    label: '排序号',
                    prop: 'orderNum',
                    width: 120
                }, {
                    label: '菜单URL',
                    prop: 'url',
                    width: 120
                }, {
                    label: '授权标识',
                    prop: 'perms',
                    width: 120
                }],
                multipleSelection: [],
                data: {},
                query: {
                    page: ''
                },
                ids: [],
                menuId: '',

                tableListData: [], // tableListData 展示数据的data
                foldList: [] // 该数组中的值 都会在列表中进行隐藏  死亡名单
            }
        },
        mounted: function () {
            this.listAllMenus();
        },
        methods: {
            onQuery() {
                this.listAllMenus(this.queryForm);
            },
            handleSizeChange(val) {
            },
            handleCurrentChange(val) {
                this.queryForm.page = val;
                this.listAllMenus(this.queryForm);
            },
            async listAllMenus(queryForm) {
                let res = await this.$api.get('/sys/menu/list', queryForm);
                if (res.code === 0) {
                    this.data = res;
                    this.tableListData = this.formatConversion([], res.list)
                } else {
                    this.$message.error(res.msg);
                }
            },
            onCancelNewModal() {
                this.showAddModal = false;
            },
            onSubmitNewModal() {
                this.showAddModal = false;
                this.listAllMenus();
            },
            batchDeleteRow() {
                let rows = this.$refs.dataTable.selection;
                if (rows.length === 0) {
                    this.$message.warning('请选择一条记录');
                    return;
                } else {
                    let ids = [];
                    for (let row of rows) {
                        ids.push(row.menuId);
                    }
                    this.ids = ids;
                    this.showConfirmModal = true;
                }
            },
            closeConfirmModal() {
                this.showConfirmModal = false;
            },
            async submitBatchDeleteRow() {
                let res = await this.$api.post('/sys/menu/delete?menuId=' + new Number(this.menuId));
                if (res.code === 0) {
                    this.ids = this.$options.data().ids;
                    this.$message.success('删除成功');
                    this.showConfirmModal = false;
                    this.listAllMenus(this.queryForm);
                } else {
                    this.$message.error(res.msg);
                }
            },
            onDelRow(id) {
                this.menuId = new String(id);
                this.ids.push(id);
                this.isSingle = true;
                this.showConfirmModal = true;
            },
            openNewModal() {
                this.menuId = '';
                this.$refs.categoryModal.modalLabel = '新增菜单';
                this.$refs.categoryModal.newForm = this.$refs.categoryModal.$options.data().newForm;
                this.showAddModal = true;
            },
            editDetail(id) {
                this.menuId = new String(id);
                this.$refs.categoryModal.modalLabel = '编辑菜单';
                this.$refs.categoryModal.getInfo(id);
                this.showAddModal = true;
            },

            /*********************************
             ** Fn: toggleFoldingStatus
             ** Intro: 切换展开 还是折叠
             ** @params: params 当前点击行的数据
             ** Author: zyx
             *********************************/
            toggleFoldingStatus(params) {
                this.foldList.includes(params.__identity) ? this.foldList.splice(this.foldList.indexOf(params.__identity), 1) : this.foldList.push(params.__identity)
            },
            /*********************************
             ** Fn: toggleDisplayTr
             ** Intro: 该方法会对每一行数据都做判断 如果foldList 列表中的元素 也存在与当前行的 __family列表中  则该行不展示
             ** @params:
             ** Author: zyx
             *********************************/
            toggleDisplayTr({row, index}) {
                for (let i = 0; i < this.foldList.length; i++) {
                    let item = this.foldList[i]
                    // 如果foldList中元素存在于 row.__family中，则该行隐藏。  如果该行的自身标识等于隐藏元素，则代表该元素就是折叠点
                    if (row.__family.includes(item) && row.__identity !== item) return 'display:none;'
                }
                return ''
            },
            /*********************************
             ** Fn: toggleFoldingClass
             ** Intro: 如果子集长度为0，则不返回字体图标。
             ** Intro: 如果子集长度为不为0，根据foldList是否存在当前节点的标识返回相应的折叠或展开图标
             ** Intro: 关于class说明：permission_placeholder返回一个占位符，具体查看class
             ** @params: params 当前行的数据对象
             ** Author: zyx
             *********************************/
            toggleFoldingClass(params) {
                return params.list == null || params.list.length === 0 ? 'permission_placeholder' : (this.foldList.indexOf(params.__identity) === -1 ? 'fa fa-minus-square-o' : 'fa fa-plus-square-o')
            },
            /*********************************
             ** Fn: formatConversion
             ** Intro: 将树形接口数据扁平化
             ** @params: parent 为当前累计的数组  也是最后返回的数组
             ** @params: children 为当前节点仍需继续扁平子节点的数据
             ** @params: index 默认等于0， 用于在递归中进行累计叠加 用于层级标识
             ** @params: family 装有当前包含元素自身的所有父级 身份标识
             ** @params: elderIdentity 父级的  唯一身份标识
             ** Author: zyx
             *********************************/
            formatConversion(parent, children, index = 0, family = [], elderIdentity = 'x') {
                // children如果长度等于0，则代表已经到了最低层
                // let page = (this.startPage - 1) * 10
                if (children.length > 0) {
                    children.map((x, i) => {
                        // 设置 __level 标志位 用于展示区分层级
                        Vue.set(x, '__level', index)
                        // 设置 __family 为家族关系 为所有父级，包含本身在内
                        Vue.set(x, '__family', [...family, elderIdentity + '_' + i])
                        // 本身的唯一标识  可以理解为个人的身份证咯 一定唯一。
                        Vue.set(x, '__identity', elderIdentity + '_' + i)
                        parent.push(x)
                        // 如果仍有子集，则进行递归
                        if (x.list != null && x.list.length > 0) this.formatConversion(parent, x.list, index + 1, [...family, elderIdentity + '_' + i], elderIdentity + '_' + i)
                    })
                }
                return parent
            },
            clickEdit(row){
                console.log(JSON.stringify(row));
            },
            clickDelete(row){
                console.log(JSON.stringify(row));
            }
        },
        computed: {
            /*********************************
             ** Fn: foldAllList
             ** Intro: 记录属性结构的首层节点
             ** Author: zyx
             *********************************/
            foldAllList() {
                return this.tableListData.map(x => x.__identity)
            },
        },
        created() {
        }
    }
</script>

<style scoped lang="less">
    .product-list .content-wrapper /deep/ .el-form-item__label {
        color: #666;
        font-size: 12px;
    }

    .permission_toggleFold {
        vertical-align: middle;
        padding-right: 5px;
        font-size: 16px;
        cursor: pointer;
    }

    .permission_placeholder {
        content: ' ';
        display: inline-block;
        width: 16px;
        font-size: 16px;

    }

    .init_table {
        margin: 0 auto !important;
        font-size: 14px;

        th {
            background-color: #edf6ff;
            text-align: center !important;
            color: #066cd4;
            font-weight: bold;

            .cell {
                padding: 0 !important;
            }

        }

        td, th {
            font-family: '宋体';
            font-size: 12px;
            padding: 0 !important;
            height: 40px !important;
        }

        .el-table--border, .el-table--group {
            border: 1px solid #dde2ef;
        }

        td, th.is-leaf {
            border-bottom: 1px solid #dde2ef;
        }


        .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
            border-right: 1px solid #dde2ef;
        }

        .el-table--striped .el-table__body tr.el-table__row--striped td {
            background-color: #f7f9fa;
        }
    }
</style>
